<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽练习</title>
 <style>
     #big{width:600px;height:600px;border: 1px solid red;}
     #small{width:50px;height:50px;background-color: #00B83F;cursor: pointer;}
 </style>
    <script>
        window.onload=function(){
        var obig=document.getElementById('big');
        var osmall=document.getElementById('small');
        var disX=0;
        var disY=0;
            osmall.onmousedown=function(ev){//鼠标按下 --->求鼠标到物体之间的距离  固定
              var oEvent=ev||event;
//           获取鼠标的横距离  oEvent.clientX
//           获取鼠标的纵坐标  oEvent.clientY
//           获取物体的横距离  osmall.offsetLeft
//           获取物体的纵坐标  osmall.offsetTop
//           鼠标按下距离小方块的X、Y轴距离  这个距离是固定
              disX=oEvent.clientX-osmall.offsetLeft;
              disY=oEvent.clientY-osmall.offsetTop;
              document.onmouseover=function(ev){//鼠标移动 --->根据固定距离求物体的位置
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
//                阻止用户将框从四周拖出去的方法
                if(l<0){
                    l=0;
                }else if(l>obig.offsetWidth-osmall.offsetWidth){
                    l=obig.offsetWidth-osmall.offsetWidth;
                }
                if(t<0){
                    t=0;
                }else if(t>obig.offsetHeight-osmall.offsetHeight){
                    t=obig.offsetHeight-osmall.offsetHeight;
                }
                  osmall.style.left=l+'px';
                  osmall.style.top=t+'px';
              };
                document.onmouseup=function(){//鼠标抬起  -->需要把鼠标移动解除
                    document.onmouseover=null;
                    document.onmouseup=null;
              };

          };



        };
    </script>
</head>
<body>

<div id="big">
    <div id="small">11</div>
</div>
<!--如果让一个小块在大块里面移动，不超过大块的范围  牢记两步计算步骤和鼠标按下、移动、抬起-->
</body>
</html>